/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import styles from './updateInfo.module.less'
import { useEffect } from 'react';
import { getUserInfo, updateInfo, updateUserInfoCaptcha } from '../../interfaces';
import { HeadPicUpload } from './headPicUpload';
import { Logout } from '../login/logout';


/**
 * 该页面涉及三个接口
 * /user/info 查询用户信息的接口，用来回显数据
 * /user/update 修改用户信息的接口，用来做修改
 * /user/update/captcha 发送验证码的接口
 */


export function UpdateInfo() {
    const [form] = useForm();
   
    //回显用户信息
    useEffect(() => {
        async function query() {
            const res = await getUserInfo();
            if (res.status === 201 || res.status === 200) {
                console.log(res.data);
                form.setFieldValue('headPic', res.data.headPic);
                form.setFieldValue('nickName', res.data.nickName);
                form.setFieldValue('email', res.data.email);
                form.setFieldValue('username', res.data.username);
            }
        }
        query();
    }, [])


    //修改用户信息
    const onFinish = async (values: UserInfo) => {
       try{ 
        const res = await updateInfo(values)
        if (res.status === 201 || res.status === 200) {
            message.success('用户更新信息成功')
            
            const userInfo = localStorage.getItem('userInfo')
            if(userInfo){
                const info = JSON.parse(userInfo);
                info.headPic = values.headPic;
                info.nickName = values.nickName
                localStorage.setItem('userInfo',JSON.stringify(info))
            }
        }
    }catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试')
    }
    };

    //发送验证码
    const sendCaptcha = async function () {
        const address = form.getFieldValue('email')
        try {
            const res = await updateUserInfoCaptcha(address);
            if(res.status === 201 || res.status === 200) {
                message.success('发送成功');
            } 
        } catch(e: any) {
            message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
        }
    };



    return <div id={styles.updateInfo_container}>
        <Form
            form={form}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="头像"
                name="headPic"
                rules={[
                    { message: '请输入头像!' },
                ]}
                shouldUpdate
            >
                <HeadPicUpload></HeadPicUpload>
            </Form.Item>

            <Form.Item
                label="昵称"
                name="nickName"
                rules={[
                    {  message: '请输入昵称!' },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    {  message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!' }
                ]}
            >
                <Input />
            </Form.Item>

            <div className={styles.captcha_wrapper}>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{  message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item
                label=" "
            >
                <Button className={styles.btn} type="primary" htmlType="submit">
                    修改
                </Button>
                <Logout />
            </Form.Item>
        </Form>
    </div>
}





/**
 * 8.14
 * 401报错(缺乏目标资源的身份信息验证) 回显用户信息接口需要登录，需要在取出token放到header里
 * 携带header的通用逻辑可以放在axios的interceptor里
 * 并且接口返回token的header更新本地token
 * 又是400错误，忘记给验证码提供邮箱地址了。。
 * 8.14 11:58 开始尝试用zustand管理token，暂时用localStorage代替，后续再优化
 * 怎么也修改不了头像，因为头像上传组件里没写onchange
 * 然后报错 `ERR_SSL_PROTOCOL_ERROR`,表示当浏览器无法建立受 SSL 保护的网站时，会出现常见的 SSL/TLS 相关问题。
 * 是因为在更新头像组件里把http打成了https,https协议需要SSL证书，而本地开发环境没有证书，所以会报错。
 * 进度：
 * 用 minio 实现了 OSS 服务(用前端直传 OSS，然后把文件 url 发给应用服务器)
 * 不想在前端代码暴露 accessKey，所以是用的预签名的方式
 * 服务端用 presignedPutObject 返回一个预签名 url 给前端。前端用这个 url 来发送 put 请求，来把文件直传 minio
 * 通过 customRequest(自定义请求发送方式) 来重写了antd的Dragger组件上传逻辑(默认用 form data 来发送请求,也就是key,value)
 * 因为minio 要求直接把文件放到 body 里，所以要重写请求体的格式。
 */